<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>H5营销活动页生成器</title>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/animate.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
</head>

<body>
    <script>
        // 检查登录状态
        if (localStorage.getItem('isLoggedIn') !== 'true') {
            window.location.href = '/login.html';
        }
    </script>
    <div class="app-container">
        <!-- 顶部工具栏 -->
        <header class="toolbar">
            <div class="toolbar-left">
                <h1>H5页面生成器</h1>
            </div>
            <div class="toolbar-right">
                <!-- 页面管理 -->
                <div class="page-manager">
                    <button id="addPageBtn" class="btn btn-info">+ 添加页面</button>
                    <div class="page-tabs" id="pageTabs">
                        <div class="page-tab active" data-page="0">
                            <span>页面 1</span>
                            <button class="page-close" data-page="0">×</button>
                        </div>
                    </div>
                </div>
                <button id="saveBtn" class="btn btn-primary">保存</button>
                <button id="loadBtn" class="btn btn-secondary">读取</button>
                <button id="previewBtn" class="btn btn-success">预览</button>
                <div class="user-info">
                    <div class="user-dropdown">
                        <button class="user-dropdown-toggle" id="userDropdownToggle">
                            <span id="welcomeText">欢迎，admin</span>
                            <span class="dropdown-arrow">▼</span>
                        </button>
                        <div class="user-dropdown-menu" id="userDropdownMenu">
                            <a href="#" class="dropdown-item" id="userCenterBtn">
                                <span class="dropdown-icon">👤</span>
                                用户中心
                            </a>
                            <a href="#" class="dropdown-item" id="userManageBtn" style="display: none;">
                                <span class="dropdown-icon">⚙️</span>
                                用户管理
                            </a>
                            <div class="dropdown-divider"></div>
                            <a href="#" class="dropdown-item" id="logoutBtn">
                                <span class="dropdown-icon">🚪</span>
                                退出登录
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <div class="main-content">
            <!-- 左侧元素面板 -->
            <aside class="sidebar">
                <h3 class="accordion-header" data-target="elementContent">
                    <span>元素库</span>
                    <span class="accordion-icon">▼</span>
                </h3>
                <div class="accordion-content" id="elementContent">
                    <div class="element-categories two-column">
                        <div class="category">
                            <h4>文本</h4>
                            <div class="element-item" draggable="true" data-type="text">
                                <span class="element-icon">📝</span>
                                <span>文本</span>
                            </div>
                        </div>
                        <div class="category">
                            <h4>图片</h4>
                            <div class="element-item" draggable="true" data-type="image">
                                <span class="element-icon">🖼️</span>
                                <span>图片</span>
                            </div>
                        </div>
                        <div class="category">
                            <h4>按钮</h4>
                            <div class="element-item" draggable="true" data-type="button">
                                <span class="element-icon">🔘</span>
                                <span>按钮</span>
                            </div>
                        </div>
                        <div class="category">
                            <h4>表单</h4>
                            <div class="element-item" draggable="true" data-type="input">
                                <span class="element-icon">📝</span>
                                <span>输入框</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 结构库 -->
                <div class="structure-library">
                    <h3 class="accordion-header" data-target="structureContent">
                        <span>结构库</span>
                        <span class="accordion-icon">▼</span>
                    </h3>
                    <div class="accordion-content" id="structureContent">
                        <div class="structure-item" id="gridStructure">
                            <span class="structure-icon">⊞</span>
                            <span>网格</span>
                        </div>
                    </div>
                </div>
            </aside>

            <!-- 中间画布区域 -->
            <main class="canvas-container">
                <div class="canvas-header">
                    <h3>画布区域 (375×667px)</h3>
                    <div class="canvas-controls">
                        <button id="backgroundBtn" class="btn btn-sm btn-info">背景设置</button>
                        <button id="clearCanvas" class="btn btn-sm btn-danger">清空画布</button>
                        <button id="pageSettingsBtn" class="btn btn-sm btn-warning">页面设置</button>
                    </div>
                </div>
                <div class="canvas-wrapper">
                    <div class="page-navigation">
                        <button id="prevPageBtn" class="page-nav-btn" disabled>← 上一页</button>
                        <span id="pageIndicator">1 / 1</span>
                        <button id="nextPageBtn" class="page-nav-btn" disabled>下一页 →</button>
                    </div>
                    <!-- Swiper容器 -->
                    <div class="swiper canvasSwiper">
                        <div class="swiper-wrapper" id="canvasSwiperWrapper">
                            <!-- 第一页画布 -->
                            <div class="swiper-slide">
                                <div id="canvas" class="canvas" data-page="0">
                                    <div class="canvas-placeholder">
                                        <p>拖拽左侧元素到此处开始设计</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>

            <!-- 右侧属性面板 -->
            <aside class="properties-panel">
                <h3>属性设置</h3>
                <div id="propertiesContent" class="properties-content">
                    <p class="placeholder">选择一个元素来编辑属性</p>
                </div>
                <!-- <button id="deleteElement" class="btn btn-danger">删除元素</button> -->
            </aside>
        </div>
    </div>

    <!-- 背景设置模态框 -->
    <div id="backgroundModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>画布背景设置</h3>
                <span class="close">&times;</span>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>画布背景颜色:</label>
                    <div class="color-input-group">
                        <input type="color" id="bgColor" value="#ffffff">
                        <span class="color-value" id="bgColorValue">#ffffff</span>
                    </div>
                </div>
                <div class="form-group">
                    <label>画布背景图片:</label>
                    <input type="url" id="bgImage" placeholder="输入图片URL">
                </div>
                <div class="form-group">
                    <button id="applyBackground" class="btn btn-primary">应用到画布</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 保存/读取模态框 -->
    <div id="saveModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>保存页面</h3>
                <span class="close">&times;</span>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>文件名:</label>
                    <input type="text" id="saveFilename" placeholder="输入文件名">
                </div>
                <div class="form-group">
                    <button id="confirmSave" class="btn btn-primary">确认保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 读取模态框 -->
    <div id="loadModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>读取页面</h3>
                <span class="close">&times;</span>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>选择文件:</label>
                    <select id="loadFileSelect">
                        <option value="">请选择文件</option>
                    </select>
                </div>
                <div class="form-group">
                    <button id="confirmLoad" class="btn btn-primary">确认读取</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Toast提示容器 -->
    <div id="toastContainer" class="toast-container"></div>

    <!-- 网格选择气泡提示 -->
    <div class="structure-tooltip" id="gridTooltip">
        <div class="tooltip-header">选择网格列数</div>
        <div class="grid-options">
            <div class="grid-option" data-cols="2">
                <div class="grid-preview">
                    <div class="preview-cell"></div>
                    <div class="preview-cell"></div>
                </div>
                <span>2列</span>
            </div>
            <div class="grid-option" data-cols="3">
                <div class="grid-preview">
                    <div class="preview-cell"></div>
                    <div class="preview-cell"></div>
                    <div class="preview-cell"></div>
                </div>
                <span>3列</span>
            </div>
            <div class="grid-option" data-cols="4">
                <div class="grid-preview">
                    <div class="preview-cell"></div>
                    <div class="preview-cell"></div>
                    <div class="preview-cell"></div>
                    <div class="preview-cell"></div>
                </div>
                <span>4列</span>
            </div>
        </div>
        <div class="tooltip-actions">
            <button class="btn-cancel" id="cancelGrid">取消</button>
            <button class="btn-confirm" id="confirmGrid">确定</button>
        </div>
    </div>

    <!-- 用户管理模态框 -->
    <div id="userManageModal" class="modal">
        <div class="modal-content" style="max-width: 800px;">
            <div class="modal-header">
                <h3>用户管理</h3>
                <span class="close">&times;</span>
            </div>
            <div class="modal-body">
                <div class="user-manage-toolbar">
                    <button id="addUserBtn" class="btn btn-primary">添加用户</button>
                    <div class="user-search">
                        <input type="text" id="userSearchInput" placeholder="搜索用户...">
                    </div>
                </div>
                <div class="user-list" id="userList">
                    <!-- 用户列表将在这里动态生成 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 添加/编辑用户模态框 -->
    <div id="userEditModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="userEditTitle">添加用户</h3>
                <span class="close">&times;</span>
            </div>
            <div class="modal-body">
                <form id="userEditForm">
                    <div class="form-group">
                        <label for="editUsername">用户名</label>
                        <input type="text" id="editUsername" required>
                    </div>
                    <div class="form-group">
                        <label for="editPassword">密码</label>
                        <input type="password" id="editPassword" required>
                    </div>
                    <div class="form-group">
                        <label for="editDisplayName">显示名称</label>
                        <input type="text" id="editDisplayName">
                    </div>
                    <div class="form-group">
                        <label for="editRole">角色</label>
                        <select id="editRole">
                            <option value="user">普通用户</option>
                            <option value="super_admin">超级管理员</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">保存</button>
                        <button type="button" class="btn btn-secondary" id="cancelUserEdit">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 页面设置模态框 -->
    <div id="pageSettingsModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>页面设置</h3>
                <button class="modal-close" id="pageSettingsClose">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>翻页效果</label>
                    <select id="transitionEffect" class="form-control">
                        <option value="slide">滑动</option>
                        <option value="fade">淡入淡出</option>
                        <option value="none">无</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>
                        <input type="checkbox" id="infiniteScroll"> 无限翻页
                    </label>
                </div>
                <div class="form-group">
                    <label>页面切换方式</label>
                    <select id="pageSwitchMode" class="form-control">
                        <option value="click">点击切换</option>
                        <option value="swipe">滑动切换</option>
                        <option value="both">点击+滑动</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button id="pageSettingsSave" class="btn btn-primary">保存设置</button>
                <button id="pageSettingsCancel" class="btn btn-secondary">取消</button>
            </div>
        </div>
    </div>

    <!-- 工具模块 -->
    <script src="js/utils/toast.js"></script>

    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

    <!-- 功能模块 -->
    <script src="js/modules/UserManager.js"></script>
    <script src="js/modules/ElementManager.js"></script>
    <script src="js/modules/DragDropManager.js"></script>
    <script src="js/modules/StructureManager.js"></script>
    <script src="js/modules/AccordionManager.js"></script>
    <script src="js/modules/ApiManager.js"></script>

    <!-- 主应用 -->
    <script src="js/PageBuilder.js"></script>

    <!-- 初始化应用 -->
    <script>
        // 全局错误处理，忽略第三方脚本错误
        window.addEventListener('error', function (e) {
            // 忽略来自第三方脚本的错误（如rateUs.js等）
            if (e.filename && (
                e.filename.includes('rateUs.js') ||
                e.filename.includes('hook-exec.js') ||
                e.filename.includes('chrome-extension://') ||
                e.filename.includes('moz-extension://') ||
                e.filename.includes('safari-extension://') ||
                e.filename.includes('edge-extension://')
            )) {
                e.preventDefault();
                return false;
            }

            // 记录其他错误到控制台（可选）
            console.warn('JavaScript error caught:', e.message, 'at', e.filename, 'line', e.lineno);
        });

        // 处理未捕获的Promise错误
        window.addEventListener('unhandledrejection', function (e) {
            console.warn('Unhandled promise rejection:', e.reason);
        });

        // 初始化页面构建器
        // 将PageBuilder实例设置为全局变量，以便ElementManager可以访问Swiper
        window.pageBuilder = new PageBuilder();
    </script>
</body>

</html>